import { Component, Host, h, Prop, EventEmitter, Event, Watch } from '@stencil/core';
import { IbzExpCalendarController } from '../../controllers';

/**
 * 导航日历
 *
 * @author chitanda
 * @date 2021-06-22 13:06:46
 * @export
 * @class IBzExpCalendar
 */
@Component({
  tag: 'ibz-exp-calendar',
  styleUrl: 'ibz-exp-calendar.scss',
})
export class IBzExpCalendar {
  /**
   * 最大时间跨度
   *
   * @type {number}
   * @memberof IBzExpCalendar
   */
  @Prop()
  maxTimeSpan: number = 7;

  /**
   * 起始日期
   *
   * @type {string} YYYY-MM-DD
   * @memberof IBzExpCalendar
   */
  @Prop()
  startDate: string;

  /**
   * 结束日期
   *
   * @type {string} YYYY-MM-DD
   * @memberof IBzExpCalendar
   */
  @Prop()
  endDate: string;

  /**
   * 日期内的数据量
   *
   * @type {*}
   * @memberof IBzExpCalendar
   */
  @Prop()
  data: any;

  /**
   * 自动填充模式
   *
   * @type {*}
   * @memberof IBzExpCalendar
   */
  @Prop()
  autoComplete: boolean;

  /**
   *自动填充天数
   *
   * @type {number | string}
   * @memberof IBzExpCalendar
   */
  @Prop()
  completeDays: number | string = 6;

  /**
   *主题
   *
   * @type {number | string}
   * @memberof IBzExpCalendar
   */
  @Prop()
  theme: string = '';

  /**
   *尺寸
   *
   * @type {number | string}
   * @memberof IBzExpCalendar
   */
  @Prop()
  size: string = '';

  /**
   * 选中改变触发事件
   *
   * @type {EventEmitter}
   * @memberof IBzExpCalendar
   */
  @Event({ eventName: 'select-change' })
  selectChangeEventEmitter: EventEmitter;

  /**
   * 监听起始日期变化
   *
   * @memberof IBzExpCalendar
   */
  @Watch('startDate')
  startDateChange() {
    this.reloadProperty();
  }

  /**
   * 监听结束日期变化
   *
   * @memberof IBzExpCalendar
   */
  @Watch('endDate')
  endDateChange() {
    this.reloadProperty();
  }

  /**
   * 控制器
   *
   * @type {IbzExpCalendarController}
   * @memberof IBzExpCalendar
   */
  ctrl: IbzExpCalendarController = new IbzExpCalendarController();

  /**
   * 组件加载完毕
   *
   * @memberof IBzExpCalendar
   */
  componentWillLoad() {
    this.selectChange = this.selectChange.bind(this);
    this.ctrl.evt.on('selectChange', this.selectChange);
    this.ctrl.initCtrlParam(
      this.maxTimeSpan,
      this.startDate,
      this.endDate,
      this.data,
      this.autoComplete,
      this.completeDays,
      this.theme,
      this.size,
    );
    this.ctrl.setCells();
  }

  /**
   * 重新加载属性
   *
   * @memberof IBzExpCalendar
   */
  reloadProperty() {
    this.ctrl.initCtrlParam(
      this.maxTimeSpan,
      this.startDate,
      this.endDate,
      this.data,
      this.autoComplete,
      this.completeDays,
      this.theme,
      this.size,
    );
    if(this.startDate) {
      this.ctrl.setCurrentDay(this.startDate);
    }
  }

  /**
   * 组件断开连接回调
   *
   * @memberof IBzExpCalendar
   */
  disconnectedCallback() {
    this.ctrl.evt.off('selectChange', this.selectChange);
  }

  /**
   * 起始|结束 选择发生改变触发
   *
   * @memberof IBzExpCalendar
   */
  selectChange() {
    this.selectChangeEventEmitter.emit({ startDate: this.ctrl.startDate, endDate: this.ctrl.endDate });
  }

  /**
   * 绘制函数
   *
   * @return {*}
   * @memberof IBzExpCalendar
   */
  render() {
    return (
      <Host class={{ 'ibz-exp-calendar': true, small: this.size.toLowerCase() === 'small' }}>
        <ibz-exp-calendar-container>
          <ibz-exp-calendar-header slot='header' ctrl={this.ctrl}></ibz-exp-calendar-header>
          <ibz-exp-calendar-content slot='content' ctrl={this.ctrl}></ibz-exp-calendar-content>
          <ibz-exp-calendar-bar slot='bar' ctrl={this.ctrl}></ibz-exp-calendar-bar>
        </ibz-exp-calendar-container>
      </Host>
    );
  }
}
